import React, { Component } from 'react'
import axios from 'axios'
import Hrader from '../../../../components/head/hrader'
import './mySetSite.less'
import cookies from 'js-cookie'
import Alert from '../../../../components/alert/alert'
export default class MySetSite extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '修改我的地址', path: '/mySite', age: '删除' },
            data: [],
            title: '',//填写的地址
            alertFlag: false,//弹层状态
            status: null,
        }
    }
    render() {
        let { data, title, status } = this.state
        console.log(data);
        return (
            <div className="mySetSite_box">
                <div className="mySetSite_header">
                    <Hrader title={this.state.headtitle} subBtn={this.manage} />
                </div>
                <div className="mySetSite_body">
                    <div>
                        <span>收货人</span>
                        <p>{data.user_name}</p>
                    </div>
                    <div>
                        <span>手机号码</span>
                        <p>{data.user_phone}</p>
                    </div>
                    <div>
                        <span>收货地址</span>
                        <input type="text" className="mySetSite_text" value={title} onChange={(e) => { this.setState({ title: e.target.value }) }} placeholder="请填写详细地址" />
                    </div>
                    <div className="mySetSite_siteStatus">
                        <div>设为默认地址</div>
                        <div className={`iconfont ${status === '0' ? 'icon-morendizhiweixuanzhong' : 'icon-morendizhixuanzhong'}`}
                            onClick={() => { this.status() }}
                        ></div>
                    </div>

                </div>
                {this.state.alertFlag ? <div className="my_alert">
                    <Alert title={this.state.alerttitle} alertX={this.alertX} alertSub={this.alertSub}></Alert>
                </div> : null}
                <div className="mySetSite_sub" onClick={() => { this.mySetSite_sub() }}>保存</div>
            </div>
        )
    }

    // 删除按钮
    manage = () => {
        let { data } = this.state
        this.setState({ alertFlag: true, site_id: data.site_id, alerttitle: '确认删除本条地址' })
    }
    //保存按钮
    mySetSite_sub = () => {
        // console.log(this.state.title);
        // if (this.state.title) {
        let { data } = this.state
        if (this.state.title) {
            // 修改状态的接口
            axios({
                method: 'post',
                url: '/api/front_end/setSite',
                data: {
                    user_id: data.site_userId,
                    site_id: data.site_id,//    地址id
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code === '01') {
                }
            })
            //修改地址的接口
            axios({
                method: 'post',
                url: '/api/front_end/changeSite',
                data: {
                    site: this.state.title,
                    site_id: this.state.data.site_id //    地址id
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code === '01') {
                    // this.getData()
                    this.props.history.push({
                        pathname: '/mySite',
                    })
                }
            })

        } else {
            // console.log('请填写新地址');
            this.setState({ alerttitle: '请填写新地址', alertFlag: true, site_id: '' })
        }

    }
    componentDidMount() {
        let { state } = this.props.location
        this.setState({ data: state, title: state.site_site, status: state.status })
    }
    //关闭弹层 
    alertX = () => {
        this.setState({ alertFlag: false })
    }
    //弹层确认
    alertSub = () => {
        console.log('确认');
        let { data } = this.state
        if (data.site_id) {
            axios({
                method: 'post',
                url: '/api/front_end/delSite',
                data: {
                    site_id: data.site_id//    地址id
                }
            }).then(res => {
                // console.log(res.data);
                if (res.data.code === '01') {
                    this.props.history.push('/mySite')
                }
            })
        }
        this.setState({ alertFlag: false })
    }
    // 修改默认状态
    status = (type, data) => {
        let { status } = this.state
        if (status === '1') {
            this.setState({ status: '0' })
        } else { this.setState({ status: '1' }) }
    }
}
